@charset "utf-8";
/**
 * 辅助功能类
 */
.ui-txt-default{
    color: #000;
}
.ui-txt-info{
    color: #808080;
}
.ui-txt-muted{
    color: #a6a6a6;
}
.ui-txt-warning{
    color: #fc4226;
}
/* 同em */
.ui-txt-highlight{
    color: #f28c48;
}

/* 1px hack */

$bordercolor : #e0e0e0;

.ui-border-t {border-top: 1px solid $bordercolor;}
.ui-border-b {border-bottom: 1px solid $bordercolor}
.ui-border-tb{
    border-top: $bordercolor 1px solid;
    border-bottom: $bordercolor 1px solid;
    background-image:none;
}
.ui-border-l{border-left: 1px solid $bordercolor;}
.ui-border-r{border-right: 1px solid $bordercolor;}
.ui-border{
    border: 1px solid $bordercolor;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-border {position: relative; border: 0;}
    .ui-border-t,.ui-border-b,.ui-border-l,.ui-border-r,.ui-border-tb{border: 0;}
    .ui-border:before{
        content:"";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid $bordercolor;
        -webkit-transform:scale(.5);
        -webkit-transform-origin: 0 0;
        padding: 1px;
        -webkit-box-sizing: border-box;
    }
    .ui-border-t{
        background-position: left top; 
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor), to($bordercolor));
    }
    .ui-border-b{
        background-position: left bottom;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor), to($bordercolor));
    }
    .ui-border-t,
    .ui-border-b{
        background-repeat: repeat-x;
        -webkit-background-size: 100% 1px;
    }
    .ui-border-tb{
        background: -webkit-gradient(linear, left bottom, left top, color-stop(.50, transparent), color-stop(.50, $bordercolor), to($bordercolor)) left top repeat-x,-webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, $bordercolor), to($bordercolor)) left bottom repeat-x;
    }
    .ui-border-tb{
        -webkit-background-size: 100% 1px;
    }
    .ui-border-l{
        background-position: left top; 
        background-image: -webkit-gradient(linear, left top, right top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor), to($bordercolor));
    }
    .ui-border-r{
        background-position: right top;
        background-image: -webkit-gradient(linear, right top, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $bordercolor), to($bordercolor));
    }
    .ui-border-l,
    .ui-border-r{
        background-repeat: repeat-y;
        -webkit-background-size: 1px 100%;
    }
}

/**
 * 垂直上下居中
 */
.ui-center{
    width: 100%;
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	text-align: center;
	height: 200px; /* 需要重置 */
}


 /**
 * 红点提醒
 */
.ui-reddot{
     position: relative;
     display: inline-block;
     line-height: 22px;
     padding: 0 6px;
     &:after{
        content: '';
        position: absolute;
        display: block;
        width: 8px;
        height: 8px;
        background-color: #f76249;
        border-radius: 5px;
        right: -3px;
        top: -3px;
        background-clip: padding-box;
    }
}
 /* 带白边的 */
.ui-reddot-border{
    @extend .ui-reddot;
    &:before{
        content: '';
        position: absolute;
        display: block;
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 5px;
        right: -4px;
        top: -4px;
        background-clip: padding-box;
        padding: 1px;
    }
}
 /* 小号的 */

.ui-reddot-s{
    @extend .ui-reddot;
    &:after{
        width: 6px;
        height: 6px;
        top: -5px;
        right: -5px;
    }
}
/**
 * 未读数通知
 */
%badge{
    display: inline-block;
    text-align: center;
    background: #f74c31;
    color: #fff;
    font-size: 11px;
    height: 16px;
    line-height: 16px;
    -webkit-border-radius: 8px;
    padding: 0 6px;
    background-clip: padding-box;
}
.ui-badge{  
    @extend %badge;
}
/* 浅色的 */

.ui-badge-muted{
    @extend .ui-badge;
    background: #b6cae0;
}
.ui-badge-wrap{
    position: relative;
    text-align: center;
}
.ui-badge-corner{
    @extend %badge;
    position: absolute;
    border: 2px #fff solid;
    height: 20px;
    line-height: 20px;
    top: -4px;
    right: -9px;
}
.ui-badge-cornernum{
    @extend %badge;
    position: absolute;
    top: -4px;
    right: -9px;
    height: 19px;
    line-height: 19px;
    font-size: 12px;
    min-width: 19px;
    -webkit-border-radius: 10px;
    top: -5px;
    right: -5px;
}
/* 箭头链接 */
.ui-arrowlink{
    position: relative;
    &:before{
        background: url(http://i.gtimg.cn/vipstyle/frozenui/1.2.0/img/icon.png?_bid=306) no-repeat 0 -75px;
        -webkit-background-size: 150px auto;
        content: "";
        display: block;
        width: 9px;
        height: 15px;
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -7px;
    }
}
.ui-nowrap{
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ui-nowrap-multi{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
